<template>
	<div>
		<el-input v-model="searchform.user" placeholder="请输入名字" style="width: 100px;"></el-input>
		<el-input v-model="searchform.pass" placeholder="账号" style="width: 100px;"></el-input>
		<el-button icon="el-icon-search" circle @click="queryData"></el-button>
		<el-button type="success" @click="resetSearchForm">重置</el-button>
		<el-button @click="addDept">添加</el-button>

		<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<span>
				<el-form ref="form" :model="form" :rules="rules" label-width="80px">
					<el-form-item label="名字" prop="user">
						<el-input v-model="form.user"></el-input>
					</el-form-item>
					<el-form-item label="账号" prop="pass">
						<el-input v-model="form.pass"></el-input>
					</el-form-item>
					<el-form-item label="性别" prop="sex">
						<el-input v-model="form.sex"></el-input>
					</el-form-item>
					<el-form-item label="年龄" prop="age">
						<el-input v-model="form.age"></el-input>
					</el-form-item>
					<el-form-item label="状态" prop="did">
						<el-input v-model="form.did"></el-input>
					</el-form-item>



					<el-form-item>
						<el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
						<el-button>取消</el-button>
					</el-form-item>
				</el-form>



			</span>

		</el-dialog>

		<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
			<el-table-column prop="id" label="编号">
			</el-table-column>
			<el-table-column prop="user" label="昵称">
			</el-table-column>
			<el-table-column prop="pass" label="账号">
			</el-table-column>
			<el-table-column prop="sex" label="性别">
			</el-table-column>
			<el-table-column prop="age" label="年龄">
			</el-table-column>
			<el-table-column prop="did" label="状态">
				<template slot-scope="scope">
					<!-- @change="deldemo(scope.row.id)"  "状态删除" -->
					<el-switch @change="deldemo(scope.row.id)" v-model="scope.row.did" active-color="#13ce66"
						inactive-color="#ff4949" :active-value="1" :inactive-value="2">
					</el-switch>
				</template>
			</el-table-column>

			<el-table-column fixed="right" label="操作" width="100">
				<template slot-scope="scope">
					<el-button @click="deldemo(scope.row.id)" type="text" size="small">删除</el-button>
					<el-button type="text" size="small" @click="upddemo(scope.row)">修改</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination
		 @size-change="handleSizeChange"
		  @current-change="handleCurrentChange"
			:current-page="page.current" 
			:page-sizes="[2, 4, 6,8, 10]" 
			:page-size="page.size"
			layout="total, sizes, prev, pager, next, jumper"
			 :total="page.total">
		</el-pagination>
	</div>
</template>

<style>
	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}
</style>

<script>
	import qs from 'qs'
	export default {
		methods: {
			//分页
			  handleSizeChange(val) {
			        console.log(`每页 ${val} 条`);
					this.page.size=val;
					this.queryData();
			      },
			      handleCurrentChange(val) {
			        console.log(`当前页: ${val}`);
					this.page.current=val;
					this.queryData();
			      },
			
			resetSearchForm() {
				this.searchform = {};
				//重置
				this.queryData();
			},
			upddemo(obj) {
				//弹出提示
				this.dialogVisible = true;
				//将按钮选中的那一行数据，填充到弹出框里
				this.form = obj; //浅拷贝
				//深拷贝
				this.form = JSON.parse(JSON.stringify(obj));

			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex % 4 === 0) {
					return 'warning-row';
				} else if (rowIndex % 4 === 2) {
					return 'success-row';
				}
				return '';
			},
			queryData() {
				// alert(JSON.stringify(this.searchform));
				//向后台发出请求，返回数据
				//第一种： const newobj={...this.searchform,...this.page};// 合并对象  ...
				// alert(JSON.stringify(newobj));
				const newobj=Object.assign(this.searchform,this.page);
				this.$axios.get("t-demo", {
					
						// user:this.searchform.user,
						// pass:this.searchform.pass,
						// current:this.page.current,
						// size:this.page.size,
						params:newobj
					
				}).then(r => {
					// alert(JSON.stringify(r.data.t))
					this.tableData = r.data.t.records;
					// alert(JSON.stringify(this.tableData))
					// var aa=JSON.stringify(this.tableData)
					this.page.total=r.data.t.total;

				})
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			addDept() {
				this.dialogVisible = true;
				//清空绑定的form
				this.form = {};
			},
			onSubmit(formName) {
				// alert("提交");
				//发出请求
				// this.$axios.post("t-demo",qs.stringify(this.form)).then(r=>{
				// 	 this.$message({
				// 		 showClose:true,
				// 	          message: r.data.msg,
				// 	          type: 'success'
				// 	        });


				// });
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$axios.post("t-demo", qs.stringify(this.form)).then(r => {
							this.$message({
								showClose: true,
								message: r.data.msg,
								type: 'success'
							})
							//刷新数据
							this.queryData();
						});
					} else {
						// console.log('error submit!!');
						return false;
					}
					this.dialogVisible = false;

				});

			},
			deldemo(id) {
				// alert(id);
				//根据id删除数据
				//物理删除
				// this.$axios.delete("t-demo/" + id).then(r => {
				// 	alert(r.data.msg);

				// })
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//点击确认的按钮
					this.$axios.delete("t-demo/" + id).then(r => {
						this.$message({
							showClose: true,
							type: 'success',
							message: '删除成功!'
						});
						// 	//刷新数据
						this.queryData();
					})


				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}
		},

		data() {
			return {
				tableData: [],
				dialogVisible: false,
				form: {
					user: '',
					pass: '',
					sex: '',
					age: '',
					did: ''
				},
				rules: {
					user: [{
						required: true,
						message: '请输入名字',
						trigger: 'change'
					}],
					pass: [{
						required: true,
						message: '请输入账号',
						trigger: 'change'
					}],
					sex: [{
						required: true,
						message: '请输入性别',
						trigger: 'change'
					}],
					age: [{
						required: true,
						message: '请输入年龄',
						trigger: 'change'
					}],
					did: [{
						required: true,
						message: '请输入状态',
						trigger: 'change'
					}],

				},
				searchform: {
					user: "",
					pass: ""
				},
				 page:{
					 current:1,
					 total:99,
					 size:4
				 }
			}
		},
		created() {
			this.queryData();
		}
	}
</script>
<style>
</style>
